<template>
	<view>
		<view class="bg-white" v-if="detail">
			<view class="d-flex border-bottom p-2 j-sb">
			  <view>保养单号：{{detail.orderNums}}</view>
			  <view :class="detail.state===1?'text-success':'text-danger'">{{detail.state===1?'已完成':'待处理'}}</view>
			</view>
			<view class="p-2">
				<view class="font-weight" v-if="detail.shCustomerInfo&&detail.shCustomerInfo.name">{{detail.shCustomerInfo.name}}</view>
				<view  v-if="detail.machineName">保养对象：{{detail.machineName.type}}({{detail.machineName.macCode}})</view>
			</view>
			<!-- 图片信息 -->
			<view class="p-2">
			  <view>保养图片</view>
			  <view class='d-flex j-sb'>
				<view v-if="detail.picture1">
				  <image :src="detail.picture1" mode="aspectFit"  class="image-item"></image>
				</view>
				<view v-if="detail.picture2" >
				  <image :src="detail.picture2" mode="aspectFit" class="image-item"></image>
				</view>
				<view v-if="detail.picture3">
				  <image :src="detail.picture3" mode="aspectFit" class="image-item"></image>
				</view>
			  </view>
			</view>
			<view><text class="mr-1">保养人:</text><text class="text-muted">{{detail.repairerName}}</text></view>
			    <view  class="line-style fn-30" v-if="detail.startTime"><text class="mr-1">开始时间:</text><text class="cl-635454">{{detail.startTime}}</text></view>
			    <view class="line-style fn-30" v-if="detail.endTime"><text class="mr-1">保养结束时间:</text><text class="cl-635454">{{detail.endTime}}</text></view>
			      <view class="line-style fn-30" >
			        <text class="mr-1">保养结果:</text>
			        <text class="text-muted" v-if="detail.result===1">保养完成</text>
			        <text class="text-muted" v-else>保养中</text>
			      </view>
			      <view v-if="detail.remark">保养结果说明：{{detail.remark}}</view>
				<view class="p-2 mt-5" v-if="detail.state===0">
				  	<view class="main-bg-color text-white rounded mt-4 font-md text-center py-2" hover-class="main-bg-hover-color" @click="goRouter">编辑</view>
				  </view>			
		</view>
		
		
		<!-- 换上的零件或备件列表 -->
		<view class="bg-white pt-2 my-2">
			<view class="d-flex j-sb px-2 pb-2 ">
				<view class="d-flex">
					<view> <text>换上的零件或备件列表</text> <text class="ml-1 text-white px-1 rounded-circle bg-danger">{{selfRepairUseList.length}}</text></view>
					<view class="iconfont icon-jia text-orange font-weight ml-1"  
					@click="add('addComponents')"
					><text class="font-md">添加</text></view>
				</view>
			    <view  class="iconfont " :class="addComponents?'icon-jiantouarrow483':'icon-jiantouarrow487'" @click="showDetail('addComponents')"></view>
			</view>
			<view v-if="addComponents">
				<view v-if="selfRepairUseList.length>0">
					<view v-for="item in selfRepairUseList" :key="item.id" class="p-2 border-bottom">
						<view v-if="item.type===1">
							<view class="d-flex j-sb">
								<text class="font-weight">{{item.wechatMaterialName.cgMaterial.name}}</text>
								<text class="iconfont icon-shanchu1 text-danger" @click="deleteRepairUse(item,'addComponents')"></text>
							</view>
							<view class="d-flex j-sb font-sm">
								<text v-if="item.wechatMaterialName.cgMaterial.type">规格型号：{{item.wechatMaterialName.cgMaterial.type}}</text>
								<text v-if="item.wechatMaterialName.cgMaterial.texture">材质：{{item.wechatMaterialName.cgMaterial.texture}}</text>
							</view>
							<view  class="d-flex j-sb font-sm">
								<text v-if="item.wechatMaterialName.batch">批号：{{item.wechatMaterialName.batch}}</text>
								<text v-if="item.wechatMaterialName.code">编号：{{item.wechatMaterialName.code}}</text>
							</view>
							<view  class="font-sm">用量：{{item.wechatMaterialName.nums}}</view>
						</view>
						<view v-else>
							<view class="d-flex j-sb">
								<text class="font-weight">{{item.wechatPartsName.jqbzSettings.name}}</text>
								<text class="iconfont icon-shanchu1 text-danger" @click="deleteRepairUse(item,'addComponents')"></text>
							</view>
							<view v-if="item.wechatPartsName.jqbzSettings.code" class="font-sm">备件编码：{{item.wechatPartsName.jqbzSettings.code}}</view>
							<view  class="d-flex j-sb font-sm">
							    <text v-if="item.wechatPartsName.batch">批号：{{item.wechatPartsName.batch}}</text>
							    <text v-if="item.wechatPartsName.code">编号：{{item.wechatPartsName.code}}</text>
							</view>
							<view  class="font-sm">用量：{{item.wechatPartsName.nums}}</view>
						</view>
					</view>
				</view>
				<view v-else class="py-3 font-sm text-center text-light-muted">暂无换上的零件或备件</view>
			</view>
		</view>
		
		<!-- 换下的部件列表 -->
		<view class="bg-white pt-2 my-2">
			<view class="d-flex j-sb px-2 pb-2 ">
				<view class="d-flex">
					<view><text>换下的部件列表</text><text class="ml-1 text-white px-1 rounded-circle bg-danger">{{uninstallMaterialList.length}}</text></view>
					<view class="iconfont icon-jia text-orange font-weight ml-1"
					@click="add('uninstallMaterial')"
					><text class="font-md">添加</text></view>
				</view>
			    <view  class="iconfont" :class="uninstallMaterial?'icon-jiantouarrow483':'icon-jiantouarrow487'"  @click="showDetail('uninstallMaterial')"></view>
			</view>
			<view v-if="uninstallMaterial">
				<view v-if="uninstallMaterialList.length>0" >
					<view v-for="item in uninstallMaterialList" :key="item.id" class="px-2 pb-2 border-bottom">
						<view class="d-flex j-sb">
							<text class="font-weight">{{item.jqbzSettings.name}}</text>
							<text class="iconfont icon-shanchu1 text-danger" @click="deleteRepairUse(item,'uninstallMaterial')"></text>
						</view>
						<view v-if="item.jqbzSettings.code" class="font-sm">备件编码：{{item.jqbzSettings.code}}</view>
						<view  class="d-flex j-sb font-sm">
							<view v-if="item.batch">批号：{{item.batch}}</view>
							<view v-if="item.code">编号：{{item.code}}</view>
						</view>
					</view>
				</view>
				<view v-else class="py-3 font-sm text-center text-light-muted">
					暂无换下的配件
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/common/api/api.js'
	export default {
		data() {
			return {
				id:-1,
				detail:null,
				addComponents: false,/**是否展示换上的零件或备件列表 */
				uninstallMaterial: false,/**是否展示换上的零件或备件列表 */
				selfRepairUseList:[],
				uninstallMaterialList:[]
			}
		},
		onLoad(e){
			this.id = e.id;
			this.getDetail()
		},
		methods: {
			getDetail(){
				let self = this;
				self.$H.get(api.maintainDetail+this.id).then(res=>{
					self.detail = res.content;
					self.getSelfRepairUseList()
					self.getUninstallMaterialList()
				})
			},
			goRouter(){
				uni.navigateTo({
					url:`/pages/addMaintain/addMaintain?id=${this.id}&type=update`
				})
			},
			showDetail(type){
				let self = this;
				switch(type){
					case 'addComponents':
					self.addComponents=!self.addComponents;
					break;
					case 'uninstallMaterial':
					 self.uninstallMaterial = !self.uninstallMaterial
					break;
				}
			},
			/**获取换上的零件或备件列表*/
			getSelfRepairUseList() {
				this.$H.get(api.maintainRepairUseList+this.id).then(res=>{
					this.selfRepairUseList=res.content
				})
			  },
			 /**获取派修单换下的部件*/
			getUninstallMaterialList() {
				this.$H.get(api.uninstallMaterialList+this.id+'/3').then(res=>{
					this.uninstallMaterialList=res.content
				});
			},
			add(type){
				let url;
				switch(type){
					case'addComponents':
					url=`/pages/addComponents/addComponents?id=${this.id}&repairType=maintain&pid=${this.detail.pid}`
					break;
					case'uninstallMaterial':
					url=`/pages/addUninstallMaterial/addUninstallMaterial?id=${this.id}&repairType=maintain`
					break;
				}
				uni.navigateTo({
					url
				})
			},
			deleteRepairUse(item,type){
				let self = this;
				switch(type){
					case'addComponents':
					uni.showModal({
						title: '是否移除换上的零件或备件',
						success(res) {
							if (res.confirm) {
								self.$H.get(api.deleteMaintainRepairUse+item.id).then(res=>{
									uni.showToast({
										title:'移除成功',
										icon:'success'
									})
									self.getSelfRepairUseList()
								})
							}
						}
					})
					break;
					case'uninstallMaterial':
					uni.showModal({
						title: '是否移除换下的部件',
						success(res) {
							if (res.confirm) {
								self.$H.get(api.deleteUninstallMaterial+item.id).then(res=>{
									uni.showToast({
										title:'移除成功',
										icon:'success'
									})
									self.getUninstallMaterialList()
								})
							}
						}
					})
					break;
				}
			}
		}
	}
</script>

<style scoped>
.image-item{
	  width:200upx;
	  height:200upx;
	  line-height: 200upx;
	  text-align: center;
	}
</style>
